@import '../../../core/index.less';

.orin-s-usersedit-root {
    padding: 0;
    margin: 0;
    .usersedit-dialog {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: @dialogZIndex;
        overflow: auto;
        display: flex;
        &.show {
            .fadeIn();
        }
        &.hide {
            .fadeOut();
        }
        .usersedit-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            .usersedit-box {
                display: flex;
                flex-direction: column;
                background: @white;
                margin: auto;
                width: 800/@remScale;
                max-height: 800/@remScale;
            }
            .main-contain {
                flex: 1;
                overflow-y: auto;
                overflow-x: hidden;
                .scrollBarClass();
                .personalInfo-wrapper {
                    .header-wrapper {
                        display: flex;
                        align-items: center;
                        justify-content: space-between;
                        padding: 10/@remScale 20/@remScale;
                        background-color: @pinkish-grey;
                        font-size: 14/@remScale;
                    }
                    .personalInfo-content {
                        padding: 20/@remScale;
                        .user-info-detail {
                            .user-info-top {
                                display: flex;
                                .user-info-avatar {
                                    position: relative;
                                    display: flex;
                                    align-items: center;
                                    flex: 0 0 150/@remScale;
                                    height: 150/@remScale;
                                    .avatar-image {
                                        height: 100%;
                                        width: 100%;
                                        vertical-align: middle;
                                        background-position: center;
                                        border-radius: 0;
                                    }
                                    .change-avatar-btn {
                                        position: absolute;
                                        bottom: 0;
                                        width: 100%;
                                        height: 38/@remScale;
                                        color: @white;
                                        font-size: 14/@remScale;
                                        background-color: rgba(0, 0, 0, 0.5);
                                        text-align: center;
                                        cursor: pointer;
                                        line-height: 38/@remScale;
                                        input {
                                            position: absolute;
                                            bottom: 0;
                                            left: 0;
                                            right: 0;
                                            height: 40/@remScale;
                                            opacity: 0;
                                            cursor: pointer;
                                            width: 100%;
                                        }
                                    }
                                }
                                .user-info-right {
                                    width: 100%;
                                    .detail-form {
                                        .detail-item-wrapper {
                                            display: flex;
                                            margin-bottom: 20/@remScale;
                                            .detail-item-line2 {
                                                height: 40/@remScale;
                                                display: flex;
                                                flex: 1;
                                                .label {
                                                    color: @black-auxiliary;
                                                    font-size: 14/@remScale;
                                                    flex: 0 0 80/@remScale;
                                                    text-align: right;
                                                    line-height: 40/@remScale;
                                                }
                                                .name-input {
                                                    margin-left: 12/@remScale;
                                                    height: 40/@remScale;
                                                    flex: 1;
                                                    margin-bottom: 0;
                                                    .input {
                                                        width: 100%;
                                                    }
                                                }
                                                .identity-input {
                                                    margin-left: 12/@remScale;
                                                    flex: 1;
                                                }
                                                .phone-input {
                                                    margin-left: 12/@remScale;
                                                    height: 40/@remScale;
                                                    flex: 1;
                                                    margin-bottom: 0;
                                                    .input {
                                                        width: 100%;
                                                    }
                                                }
                                                .form-input {
                                                    margin-left: 12/@remScale;
                                                    height: 40/@remScale;
                                                    flex: 1;
                                                    margin-bottom: 0;
                                                    .input {
                                                        width: 100%;
                                                    }
                                                }
                                                .mobile-wechat-wrapper {
                                                    flex: 1;
                                                    display: flex;
                                                    max-width: 930/@remScale;
                                                    justify-content: space-between;
                                                    align-items: center;
                                                    margin-left: 12/@remScale;
                                                    border: 1/@remScale solid #dddddd;
                                                    border-radius: 4/@remScale;
                                                    padding: 0 10/@remScale;
                                                    width: 283/@remScale;
                                                    .text {
                                                        color: @mainColor;
                                                        font-size: 12/@remScale;
                                                        .text-overflow(1);
                                                        &.gray {
                                                            color: #cccccc;
                                                        }
                                                    }
                                                    .modify-bind {
                                                        flex: 0 0 65/@remScale;
                                                        text-align: right;
                                                        margin-left: 5/@remScale;
                                                        color: #2BACE3;
                                                        font-size: 12/@remScale;
                                                        cursor: pointer;
                                                        &:hover {
                                                            filter: brightness(105%);
                                                        }
                                                    }
                                                }
                                            }
                                            .label {
                                                color: @black-auxiliary;
                                                font-size: 14/@remScale;
                                                flex: 0 0 80/@remScale;
                                                text-align: right;
                                                line-height: 40/@remScale;
                                            }
                                            .region-input-wrapper {
                                                flex: 1;
                                                display: flex;
                                                .region-input {
                                                    flex: 1;
                                                    width: 100%;
                                                    margin-left: 12/@remScale;
                                                    height: 40/@remScale;
                                                    margin-bottom: 0;
                                                    .input {
                                                        width: 100%;
                                                    }
                                                }
                                            }
                                        }
                                    }
                                    .form-err-text {
                                        padding: 0 20/@remScale;
                                        font-size: 13/@remScale;
                                    }
                                }
                            }
                            .user-info-bottom {
                                .introduce-wrapper {
                                    display: flex;
                                    .label {
                                        color: @black-auxiliary;
                                        font-size: 14/@remScale;
                                        flex: 0 0 100/@remScale;
                                        text-align: right;
                                        line-height: 40/@remScale;
                                    }
                                    .introduce-input {
                                        margin-left: 12/@remScale;
                                        //flex: 1;
                                        width: 100%;
                                        max-width: 930/@remScale;
                                        flex-direction: column;
                                        .value-length {
                                            text-align: right;
                                            color: #cccccc;
                                            font-size: 14/@remScale;
                                            padding: 0 10/@remScale;
                                        }
                                    }
                                    .email-input {
                                        margin-left: 12/@remScale;
                                        //flex: 1;
                                        width: 100%;
                                        max-width: 930/@remScale;
                                        height: 40/@remScale;
                                        margin-bottom: 20/@remScale;
                                    }
                                    .personal-url-wrapper {
                                        flex: 1;
                                        display: flex;
                                        border: 1/@remScale solid #dddddd;
                                        border-radius: 4/@remScale;
                                        margin: 0 0 20/@remScale 12/@remScale;
                                        max-width: 930/@remScale;
                                        .personal-url {
                                            flex: 1;
                                            border: none;
                                            margin: 0;
                                            input {
                                                padding-left: 0;
                                            }
                                        }
                                        .copy {
                                            margin-left: 5/@remScale;
                                            color: @light-blue-color;
                                            font-size: 12/@remScale;
                                            cursor: pointer;
                                            padding-right: 10/@remScale;
                                            display: flex;
                                            align-items: center;
                                        }
                                    }
                                }
                            }
                            .save-btn {
                                width: 60/@remScale;
                                height: 30/@remScale;
                                line-height: 30/@remScale;
                                font-size: 14/@remScale;
                                background-color: @light-blue-color;
                                border-radius: 4/@remScale;
                                margin: 0 auto;
                                text-align: center;
                                color: @white;
                                cursor: pointer;
                            }
                        }
                    }
                    .version-record-content {
                        .content {
                            .users-wrapper-pc {
                                .user-item-wrapper {
                                    display: flex;
                                    padding: 16/@remScale 0/@remScale;
                                    border-bottom: 1/@remScale solid #eeeeee;
                                    cursor: pointer;
                                }
                            }
                            .content-date, .content-identity, .content-version,
                            .content-money, .content-from, .content-time {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                .text {
                                    color: #666666;
                                    font-size: 14/@remScale;
                                    word-break: break-all;
                                    margin-bottom: 6/@remScale;
                                }
                                .cover {
                                    .avatar {
                                        width: 30/@remScale;
                                        height: 30/@remScale;
                                    }
                                }

                            }
                            .content-date {
                                flex: 2;
                            }
                            .content-identity {
                                flex: 1;
                            }
                            .content-version {
                                flex: 1;
                            }
                            .content-money {
                                flex: 1;
                            }
                            .content-from {
                                flex: 1;
                            }
                            .content-time {
                                flex: 3;
                            }
                        }
                        .manage-btn-wrapper {
                            display: flex;
                            justify-content: center;
                            padding: 10/@remScale 20/@remScale;
                            .add-btn {
                                background-color: @light-blue-color;
                                border-radius: 4/@remScale;
                                text-align: center;
                                color: @white;
                                padding: 10/@remScale;
                                margin-right: 10/@remScale;
                                font-size: 14/@remScale;
                                cursor: pointer;
                            }
                        }
                    }
                    .qrcode-content {
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding: 0 20/@remScale;
                        .content-left {
                            .artist-code-content {
                                width: 250/@remScale;
                                margin: 20/@remScale auto 0;
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                justify-content: center;
                                padding: 35/@remScale 10/@remScale;
                                border: 1/@remScale solid #eef0f3;
                                .code-image {
                                    width: 100%;
                                }
                                .qr-code {
                                    position: relative;
                                    .code-image {
                                        //position: absolute;
                                        //z-index: 1;
                                    }
                                    .logo-mask-wrapper {
                                        position: absolute;
                                        top: 0;
                                        left: 0;
                                        bottom: 0;
                                        right: 0;
                                        display: flex;
                                        align-items: center;
                                        justify-content: center;
                                        .logo-wrapper {
                                            //position: absolute;
                                            z-index: 2;
                                            //top: 50%;
                                            //left: 50%;
                                            //transform: translate(-50%, -50%);
                                            padding: 3/@remScale;
                                            background: @white;
                                            border-radius: 4/@remScale;
                                            .logo {
                                                vertical-align: middle;
                                                width: 33/@remScale;
                                                height: 33/@remScale;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                        .content-right {
                            margin-left: 20/@remScale;
                            .choose-wrapper {
                                width: 320/@remScale;
                                display: flex;
                                font-size: 13/@remScale;
                                color: @black-six;
                                padding: 8/@remScale 0;
                                justify-content: center;
                                margin: 20/@remScale 0 20/@remScale 10/@remScale;
                                .give-choose {
                                    display: flex;
                                    margin-right: 60/@remScale;
                                    &:last-child {
                                        margin-right: 0;
                                    }
                                    .my-checkbox {
                                        width: 20/@remScale;
                                        height: 20/@remScale;
                                        border-radius: 50%;
                                        color: @white;
                                        transition: all .5s;
                                        background: #ccc;
                                        display: flex;
                                        justify-content: center;
                                        align-items: center;
                                        margin-right: 5/@remScale;
                                        .my-checkbox-icon {
                                            width: 10/@remScale;
                                        }
                                        &.checked {
                                            background: @light-blue-color;
                                        }

                                    }
                                }
                            }
                            .give-time {
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                margin: 20/@remScale auto;
                                .name-input {
                                    height: 40/@remScale;
                                    width: 120/@remScale;
                                    margin-bottom: 0;
                                    .input {
                                        width: 100%;
                                    }
                                }
                                .title {
                                    font-size: 14/@remScale;
                                    margin: 0 10/@remScale;
                                }
                                .download-btn {
                                    background-color: @light-blue-color;
                                    border-radius: 4/@remScale;
                                    text-align: center;
                                    color: @white;
                                    padding: 10/@remScale;
                                    font-size: 14/@remScale;
                                    margin: 20/@remScale auto;
                                    cursor: pointer;
                                }
                            }
                            .btn-wrapper {
                                display: flex;
                                .download-btn {
                                    background-color: @light-blue-color;
                                    border-radius: 4/@remScale;
                                    text-align: center;
                                    color: @white;
                                    padding: 10/@remScale;
                                    font-size: 14/@remScale;
                                    margin: 20/@remScale auto;
                                    cursor: pointer;
                                }
                            }

                        }

                    }
                    .invite-content {
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        padding: 30/@remScale 20/@remScale;
                        .assign-agent-wrapper {
                            height: 40/@remScale;
                            width: 400/@remScale;
                            position: relative;
                            .name-input {
                                height: 40/@remScale;
                                flex: 0 0 300/@remScale;
                                margin-bottom: 0;
                                .input {
                                    width: 100%;
                                }
                            }
                            .search-user-wrapper {
                                background: @white;
                                padding: 10/@remScale 10/@remScale 0;
                                position: absolute;
                                width: 100%;
                                z-index: 3;
                                .boxShadow();
                                .search-user-top {
                                    display: flex;
                                    justify-content: space-between;
                                    align-items: center;
                                    margin-bottom: 20/@remScale;
                                    .search-user-input {
                                        width: 250/@remScale;
                                        height: 40/@remScale;
                                        margin-bottom: 0;
                                        margin-right: 5/@remScale;
                                        @media (max-width: @max1) {
                                            width: 60%;
                                        }
                                    }
                                    .btn {
                                        width:60/@remScale;
                                        height: 40/@remScale;
                                        line-height: 40/@remScale;
                                        text-align: center;
                                        font-size: 12/@remScale;
                                        margin-right: 5/@remScale;
                                        background-color: @light-blue-color;
                                        border-radius: 4/@remScale;
                                        color: @white;
                                        cursor: pointer;
                                    }
                                    .search-user-span {
                                        width: 14/@remScale;
                                        height: 14/@remScale;
                                        display: flex;
                                        color: @pinkish-grey;
                                        cursor: pointer;
                                        &:hover {
                                            color: @black-auxiliary-text;
                                            @media (max-width: @max1) {
                                                color: @pinkish-grey;
                                            }
                                        }
                                    }
                                }
                                .search-user-bottom {
                                    text-align: center;
                                    .bottom-ul {
                                        max-height: 172/@remScale;
                                        overflow-y: auto;
                                        &::-webkit-scrollbar {
                                            width: 5/@remScale;
                                        }
                                        &::-webkit-scrollbar-thumb {
                                            background-color: #A6A6A6;
                                            border-left: 2/@remScale solid transparent;
                                        }
                                        &::-webkit-scrollbar-track {
                                            background-color: #E5E5E5;
                                            border-left: 2/@remScale solid transparent;
                                        }
                                        .bottom-li {
                                            padding-left: 10/@remScale;
                                            height: 43/@remScale;
                                            line-height: 43/@remScale;
                                            border-bottom: 1/@remScale solid @cut-line-color;
                                            font-size: 14/@remScale;
                                            color: @black-auxiliary-text;
                                            text-align: left;
                                            display: flex;
                                            cursor: pointer;
                                            .li-name {
                                                width: 150/@remScale;
                                                padding-right: 10/@remScale;
                                                .text-overflow-1();
                                            }
                                            .li-phone {
                                            }
                                            &:hover {
                                                background: @light-blue-color;
                                                color: @white;
                                            }
                                        }
                                    }
                                    .has-no-artist {
                                        font-size: 14/@remScale;
                                        line-height: 40/@remScale;
                                        color: @black-three;
                                    }
                                    .add-artist-wrapper {
                                        text-align: left;
                                        cursor: pointer;
                                        color: @black-three;
                                        font-size: 14/@remScale;
                                        line-height: 40/@remScale;
                                        padding-left: 10/@remScale;
                                        border-top: 1/@remScale solid #eeeeee;
                                        .icon {
                                            width: 10/@remScale;
                                            height: 10/@remScale;
                                            margin-right: 5/@remScale;
                                        }
                                        &:hover {
                                            color: @light-blue-color;
                                        }
                                    }
                                }
                            }
                        }
                        .edit-btn {
                            height: 30/@remScale;
                            line-height: 30/@remScale;
                            padding: 0 5/@remScale;
                            margin-left: 10/@remScale;
                            background-color: @light-blue-color;
                            border-radius: 4/@remScale;
                            text-align: center;
                            color: @white;
                            font-size: 14/@remScale;
                            cursor: pointer;
                        }
                    }
                }
            }
            .close-footer {
                display: flex;
                align-items: center;
                justify-content: center;
                padding: 20/@remScale;
                border-top: 1/@remScale solid @border-color;
                font-size: 14/@remScale;
                .title {
                    width: 60/@remScale;
                    height: 30/@remScale;
                    line-height: 30/@remScale;
                    border: 1/@remScale solid @border-color;
                    border-radius: 4/@remScale;
                    text-align: center;
                    cursor: pointer;
                }
                .save-btn {
                    width: 60/@remScale;
                    height: 30/@remScale;
                    line-height: 30/@remScale;
                    margin-left: 10/@remScale;
                    background-color: @light-blue-color;
                    border-radius: 4/@remScale;
                    text-align: center;
                    color: @white;
                    cursor: pointer;
                }
            }
        }
    }
    .version-dialog {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 11;
        overflow: auto;
        display: flex;
        &.show {
            .fadeIn();
        }
        &.hide {
            .fadeOut();
        }
        .addVersion-wrap {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            background: rgba(0, 0, 0, 0.6);
            .addVersion-box {
                display: flex;
                flex-direction: column;
                background: @white;
                margin: auto;
                width: 400/@remScale;
                .version-title {
                    .dialog-header();
                    height: 60/@remScale;
                    font-size: 20/@remScale;
                    background-color: @white;
                    padding: 0 20/@remScale;
                    position: relative;
                    border-top-left-radius: 4/@remScale;
                    border-top-right-radius: 4/@remScale;
                    .icon-wrapper {
                        cursor: pointer;
                        color: @pinkish-grey;
                        &:hover {
                            color: @black-auxiliary-text;
                        }
                    }
                }
                .version-content {
                    padding: 20/@remScale;
                    .detail-item-wrapper {
                        display: flex;
                        margin-bottom: 20/@remScale;
                        .label {
                            color: @black-auxiliary;
                            font-size: 14/@remScale;
                            flex: 0 0 80/@remScale;
                            text-align: center;
                            line-height: 40/@remScale;
                        }
                        .identity-input {
                            height: 40/@remScale;
                            flex: 1;
                            margin-bottom: 0;
                            .input {
                                width: 100%;
                            }
                        }
                        .time-input {
                            width: 100%;
                            background-color: @white;
                            display: flex;
                            align-items: center;
                            border: 1/@remScale solid @border-color;
                            border-radius: 4/@remScale;
                            &:hover {
                                border-color: #c0c4cc;
                            }
                            &:focus {
                                border-color: #c0c4cc;
                            }
                            .rdt {
                                width: 100%;
                                border-radius: 4/@remScale;
                                padding-left: 10/@remScale;
                                height: 40/@remScale;
                            }
                            .close-right {
                                padding-right: 10/@remScale;
                                .close-btn {
                                    width: 20/@remScale;
                                    height: 20/@remScale;
                                    color: @pinkish-grey;
                                }
                            }
                        }
                    }
                }
                .version-footer {
                    height: 60/@remScale;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 0 0 4/@remScale 4/@remScale;
                    padding: 0 20/@remScale;
                    .confirm {
                        width: 130/@remScale;
                        height: 44/@remScale;
                        background: @light-blue-color;
                        .btnLightenHover(@light-blue-color);
                        border-radius: 4/@remScale;
                    }
                }
            }
        }
    }
}